<template>
    <div class="postop-time clearfix">
        <div class="postop">
          <div class="time">
              <h1>手术后</h1>
              <p>第 <span>25</span>天</p>
          </div>
            <div class="satisfaction clearfix">
               <div class="satisfaction-left clearfix">
                 <ul class="clearfix">
                     <li class="clearfix">
                         <span>满意度：</span>
                       <ul class="clearfix">
                           <li><img src="../../assets/small/manyi.png" alt=""></li>
                           <li><img src="../../assets/small/manyi.png" alt=""></li>
                           <li><img src="../../assets/small/manyi.png" alt=""></li>
                           <li><img src="../../assets/small/manyi.png" alt=""></li>
                           <li><img src="../../assets/small/manyi1.png" alt=""></li>
                       </ul>
                         <span>非常满意</span>
                     </li>
                     <li class="clearfix">
                         <span>肿胀度：</span>
                       <ul>
                           <li><img src="../../assets/small/zhongzhang.png" alt=""></li>
                           <li><img src="../../assets/small/zhongzhang.png" alt=""></li>
                           <li><img src="../../assets/small/zhongzhang.png" alt=""></li>
                           <li><img src="../../assets/small/zhongzhang.png" alt=""></li>
                           <li><img src="../../assets/small/zhongzhang1.png" alt=""></li>
                       </ul>
                         <span>完全不肿</span>
                     </li>
                     <li class="clearfix">
                         <span>疼痛感：</span>
                       <ul>
                           <li><img src="../../assets/small/tengdong.png" alt=""></li>
                           <li><img src="../../assets/small/tengdong.png" alt=""></li>
                           <li><img src="../../assets/small/tengdong.png" alt=""></li>
                           <li><img src="../../assets/small/tengdong.png" alt=""></li>
                           <li><img src="../../assets/small/tengdong1.png" alt=""></li>
                       </ul>
                         <span>完全不痛</span>
                     </li>
                     <li class="clearfix">
                         <span>伤疤度：</span>
                       <ul>
                           <li><img src="../../assets/small/shangba.png" alt=""></li>
                           <li><img src="../../assets/small/shangba.png" alt=""></li>
                           <li><img src="../../assets/small/shangba.png" alt=""></li>
                           <li><img src="../../assets/small/shangba.png" alt=""></li>
                           <li><img src="../../assets/small/shangba1.png" alt=""></li>
                       </ul>
                         <span>完全无痕</span>
                     </li>
                 </ul>
               </div>
                <div class="satisfaction-right">
                    <ul>
                        <li>症状：<span>轻微肿胀</span></li>
                        <li>冰敷：是</li>
                        <li>粘贴固定脚步： 无</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PostopTime"
    }
</script>

<style scoped lang="less">
    @import "../../style/style.less";
    .postop-time{
        float: left;
        margin-left: 20px;
        .postop{
            width: 765px;
            height: 143px;
            background: url("../../assets/small/time1.png") no-repeat;
            .time{
                width: 122px;
                height: 90px;
                float: left;
                margin: 20px 0  0 16px;
                h1{
                    font-size: 22px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 26px;
                    letter-spacing: 0px;
                    color: @theme-color-dark;
                    text-align: center;
                    padding-bottom: 30px;
                }
                p{
                    color: @theme-color-dark;
                    font-size: 17px;
                    line-height: 26px;
                    span{
                        font-size: 22px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 26px;
                        letter-spacing: 0px;
                        color: #333333;
                        padding-left: 28px;
                        padding-right: 28px;
                    }
                }
            }
            .satisfaction{
                float: left;
                width: 611px;
                height: 141px;
                margin-left: 15px;
                .satisfaction-left{
                    width: 359px;
                    height: 141px;
                    padding-top: 13px;
                    border-right:  2px dashed  #fff1b6;
                    float: left;
                    >ul{
                        >li{
                            margin-bottom: 8px;
                            >:first-child{
                                padding: 2px 25px 0 20px;
                            }
                            >:last-child{
                                padding-left: 20px;
                            }
                          span{
                              float: left;
                              font-size: 12px;
                              font-weight: normal;
                              font-stretch: normal;
                              letter-spacing: 0px;
                              color: #999999;
                              padding-top: 2px;
                          }

                            ul{
                               width:130px;
                                float: left;
                                li{
                                    float: left;
                                    margin-right: 6px;
                                }
                            }
                        }
                    }
                }
                .satisfaction-right{
                    float: left;
                    padding-top: 13px;
                    padding-left: 30px;
                    ul{
                        li{
                            font-size: 12px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #999999;
                            margin-bottom: 15px;
                            span{
                                background-color: #ffd9da;
                                border-radius: 4px;
                                padding: 4px 4px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>